<template>
	<view class="content">
		<view class="nav">
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
						:class="{'active':isActive==index}" @click="chenked(index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
			<!-- 账户页面 -->
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<view class="balance">
							<view class="">
								<view>门店余额</view>
								<view class="balanceNumber">{{amount}}</view>
							</view>
							<view class="balanceInfo">
								<view>提现中的金额</view>
								<view>{{withdrawal_amount_ing}}</view>
							</view>
						</view>
						<view class="payoutsMoney">
							<view class="">提现金额</view>
							<view class=""><input type="number" placeholder="请输入金额" v-model="payoutsAmount" /></view>
						</view>
						<view class="payoutsMoney" @click="toAddCards" v-if="cardInfo.length <= 0">
							<view class="">请选择提现账户</view>
							<view class="">></view>
						</view>
						<view class="container" v-else>
							<view class="orderContent">
								<view class="orderItem">
									<view class="info">
										<view class="item">
											<view>
												{{cardInfo.account_name}}
											</view>
											<view>
												{{cardInfo.card_number}}
											</view>
										</view>
										<view class="item">
											<view>
												{{cardInfo.card_name}}
											</view>
											<view>
												{{cardInfo.branch_name}}
											</view>
										</view>
									</view>
									<view class="replacement" @click="toAddCards">
										点击更换提现银行卡
									</view>
								</view>
							</view>
						</view>
						<view class="payoutsBtn" @click="payouts">
							立即提现
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 记录页面 -->
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item">
						<!-- 订单列表 -->
						<view class="orderContent">
							<view class="orderItem" v-for="item in payoutsInfo">
								<view class="item">
									<view>
										提现金额:
									</view>
									<view>
										{{item.withdrawal_amount}}
									</view>
								</view>
								<view class="item">
									<view>
										提现时间:
									</view>
									<view>
										{{item.withdrawal_create_time}}
									</view>
								</view>
								<view class="item">
									<view>
										提现状态:
									</view>
									<view>
										{{ withdrawalStatusText(item.withdrawal_status) }}
									</view>
								</view>
								<view class="item" v-if="item.withdrawal_status == '2'">
									<view>
										拒绝原因:
									</view>
									<view>
										{{ item.cause }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		computed: {
			withdrawalStatusText() {
				return (status) => {
					switch (status) {
						case '0':
							return "申请中";
						case '1':
							return "申请通过";
						case '2':
							return "申请拒绝";
						default:
							return "未知状态";
					}
				};
			}
		},
		data() {
			return {
				isActive: 0,
				index: 0,
				currentindex: 0,
				category: [{
						id: 1,
						name: '账户',
					},
					{
						id: 2,
						name: '记录',
					}
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				payoutsInfo: [],
				amount: "",
				withdrawal_amount_ing: "",
				// 提现金额
				payoutsAmount: "",
				// 选择的卡信息
				cardInfo: [],
				// 选择返回的id
				cardId: null
			}
		},
		onShow() {
			if (this.cardId) {
				console.log("Received cardId:", this.cardId);
				this.$api.post({
					url: '/store/getBankCardById',
					data: {
						id: this.cardId
					},
					success: res => {
						this.cardInfo = res
					}
				})
			}
		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
			this.getStoreBalanceAndWithdrawing()
		},
		methods: {
			// 获取提现记录
			getWithdrawalApply() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: "/store/getWithdrawalApply",
						data: {
							user_id: uni.getStorageSync('xyvenue:user').id,
							store_id: store_id
						},
						success: (res) => {
							// 遍历 payoutsInfo 数组，将时间戳转换为日期格式
							res.forEach(item => {
								item.withdrawal_create_time = this.formatDate(item
									.withdrawal_create_time);
							});
							console.log(res)
							this.payoutsInfo = res;
						}
					});
				});
			},
			// 格式化日期的方法
			formatDate(timestamp) {
				let date = new Date(timestamp * 1000); // 时间戳通常是秒，需要乘以 1000 转换为毫秒
				let year = date.getFullYear();
				let month = ('0' + (date.getMonth() + 1)).slice(-2);
				let day = ('0' + date.getDate()).slice(-2);
				let hours = ('0' + date.getHours()).slice(-2);
				let minutes = ('0' + date.getMinutes()).slice(-2);
				let seconds = ('0' + date.getSeconds()).slice(-2);
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 获取门店余额和提现中的余额
			getStoreBalanceAndWithdrawing() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: "/store/getStoreBalanceAndWithdrawing",
						data: {
							user_id: uni.getStorageSync('xyvenue:user').id,
							store_id: store_id
						},
						success: res => {
							this.withdrawal_amount_ing = res.payoutsAmount
							this.amount = res.storeBalance
							this.getWithdrawalApply()
						}
					})
				})
			},
			toAddCards() {
				uni.navigateTo({
					url: "/pages/store/cardList"
				})
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.category[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.category[i].width = data[i].width
					}
				}).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			},
			// 点击提现
			payouts() {
				if (this.payoutsAmount < 100) {
					return uni.showToast({
						icon: "none",
						title: "提现金额不得少于100"
					})
				}
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/store/addWithdrawalApply',
						data: {
							user_id: uni.getStorageSync('xyvenue:user').id,
							card_id: this.cardId,
							store_id: store_id,
							withdrawal_amount: parseInt(this.payoutsAmount)
						},
						success: res => {
							this.payoutsAmount = ""
							this.getStoreBalanceAndWithdrawing()
							uni.showToast({
								title: '申请成功'
							});
						}
					})
				})

				console.log(this.payoutsAmount)
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		display: flex;
		color: #000;
		background-color: #F4F4F4;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;

		.nav {
			position: fixed;
			background-color: #fff;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					justify-content: center;
					box-sizing: border-box;

					.tab-scroll_item {
						line-height: 60rpx;
						flex-shrink: 0;
						display: flex;
						justify-content: center;
						font-size: 36rpx;
						padding: 10rpx 40rpx;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 120rpx;
			flex: 1;

			.swiperitem-content {
				width: 95%;
				margin: auto;

				.nav_item {
					padding: 20rpx 40rpx 0rpx 40rpx;
					position: relative;

					.orderContent {
						margin-top: -40rpx;

						.orderItem {
							padding: 20rpx 40rpx;
							background-color: #fff;
							border-radius: 10rpx;
							margin-top: 40rpx;

							.item {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 10rpx 0;
							}
						}
					}

					.balance {
						background-color: #fff;
						padding: 30rpx 40rpx;
						border-radius: 15rpx;

						.balanceNumber {
							font-size: 56rpx;
							border-bottom: 2rpx solid #c7c7c7;
							padding: 10rpx 0;
							padding-bottom: 20rpx;
						}

						.balanceInfo {
							padding-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}

					.payoutsMoney {
						margin-top: 40rpx;
						padding: 20rpx 40rpx;
						display: flex;
						border-radius: 15rpx;
						background-color: #fff;
						justify-content: space-between;

						input {
							text-align: right;
						}
					}

					.payoutsBtn {
						background-color: #65C61E;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 90%;
						height: 85rpx;
						color: #fff;
						border-radius: 10rpx;
						position: fixed;
						bottom: 10%;
					}
				}
			}
		}
	}

	.active {
		position: relative;
		color: #1473FF;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		background-color: #1473FF;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	::deep .uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.container {
		padding-top: 40rpx;
	}

	.orderContent {
		width: 100%;
		margin: auto;

		.info {
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #dedede;
		}

		.orderItem {
			padding: 20rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
			}

			.replacement {
				padding: 10rpx 0;
				text-align: right;
				color: #acacac;
			}
		}
	}
</style>